import React, { useCallback, useState } from 'react'
import i18n from '@I18N'
import { ImageFile } from '@INTERFACES/Common'
import { View } from '@tarojs/components'
import UploadImage from './index'
import style from './UpLoadWithTitle.module.scss'

interface Props {
  title?: string;
  files?: ImageFile[];
  desc?: string;
  page?: string;
  onChange?: (images: ImageFile[]) => void;
  maxLength?: number;
  sizeType?: string[];
  large?: boolean;
  containerClass?: string
}

const UpLoadWithTitle: React.FC<Props> = ({
  maxLength = 9,
  sizeType = ['compressed', 'original'],
  title = i18n.patient.uploadTitle(),
  desc = i18n.patient.uploadDesc(),
  onChange,
  large = true,
  containerClass = '',
  files,
  page
}) => {
  const [images, setImages] = useState<ImageFile[]>(files || [])
  const onDelete = useCallback((index: number) => {
    const preImg = [...images]
    preImg.splice(index, 1)
    onChange?.(preImg)
    setImages(preImg)
  }, [images, onChange])
  const onUpload = useCallback((imgs: ImageFile[]) => {
    if (!imgs) return
    const curImages = imgs.concat(images)
    onChange?.(curImages)
    setImages(curImages)
  }, [images, onChange])

  return (
    <View className={`${style.container} ${large ? style.large : ''} ${containerClass}`}>
      <View className={style.title}>{title}</View>
      <View className={style.desc}>{desc}</View>
      <UploadImage
        showTop
        page={page}
        sizeType={sizeType}
        data={images}
        onDelete={onDelete}
        onUpload={onUpload}
      />
    </View>
  )
}

export default UpLoadWithTitle
